<template>
  <div class="container">
      <div class="search-box">
        <input v-model="searchTerm" placeholder="请输入要搜索的文件名称" class="search-input" />
        <button @click="searchFile" class="search-button">搜索</button>
      </div>

    <table class="papers-table">
      <thead>
        <tr>
          <th>文件名称</th>
          <th>文件摘要</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="paper in currentPagePapers" :key="paper.id">
          <td class="center-text">{{ paper.title }}</td>
          <td class="center-text">{{ paper.abstract }}</td>
          <td class="center-text">
            <a :href="paper.downloadLink" @click.prevent="downloadFile(paper.title)">下载</a>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage == 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPage }}</span>
      <button @click="nextPage" :disabled="currentPage == totalPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      papers: [],
      currentPage: 1,
      pageSize: 5,
      searchTerm: "",
      totalPage: 0
    };
  },
  computed: {
    currentPagePapers() {
      return this.papers;
    }
  },
  methods: {
    fetchPapers(newPage) {
      fetch(`http://192.168.124.128:8081/api/papers?page=${newPage}`)
        .then(response => response.json())
        .then(data => {
          this.papers = data.papers.map(paper => ({
            ...paper,
            downloadLink: `http://192.168.124.128:8081/api/download/${paper.title}`
          }));
          this.totalPage = data.totalPages;
          this.currentPage = newPage;
        })
        .catch(error => {
          console.error("Error fetching papers:", error);
        });
    },
    searchFile() {
      if (this.searchTerm) {
        this.fetchSearchResults(this.searchTerm);
      } else {
        this.fetchPapers(1); 
      }
    },

    nextPage() {
      const newPage = this.currentPage + 1;
      if (newPage <= this.totalPage) {
        this.fetchPapers(newPage);
      }
    },
    prevPage() {
      const newPage = this.currentPage - 1;
      if (newPage >= 1) {
        this.fetchPapers(newPage);
      }
    },
    fetchSearchResults(searchTerm) {
      fetch(`http://192.168.124.128:8081/api/search?term=${searchTerm}`)
        .then(response => response.json())
        .then(data => {
          if (data.papers && data.papers.length > 0) {
            this.papers = data.papers.map(paper => ({
              ...paper,
              downloadLink: `http://192.168.124.128:8081/api/download/${paper.title}`
            }));
            this.totalPage = 1;
            this.currentPage = 1;
          } else {
            alert('未搜索到相关文件');
          }
        })
        .catch(error => {
          console.error("Error searching papers:", error);
        });
    },
     downloadFile(paperName) {
      const token = localStorage.getItem('token');
      fetch(`http://192.168.124.128:8081/api/download/${paperName}`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      })
        .then(response => {
          if (response.ok) {
            return response.blob();
          } else {
            return response.json();
          }
        })
        .then(data => {
          if (data instanceof Blob) {
            const url = window.URL.createObjectURL(data);
            const a = document.createElement('a');
            a.href = url;
            a.download = paperName; 
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
          } else {
            alert(data.error);
          }
        })
        .catch(error => {
          console.error("下载文件时出错:", error);
        });
    },
    searchPapers() {
      this.fetchPapers(1);
    }
  },
  created() {
    this.fetchPapers(this.currentPage);
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f6f9fc;
  font-family: Arial, sans-serif;
  text-align: center;
}

.search-box {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.search-input {
  padding: 5px 10px;
  width: 50%; 
  box-sizing: border-box;
}

.search-button {
  padding: 5px 15px;
  background-color: #3498db;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #2980b9;
}

.papers-table {
  width: 100%;
  border-collapse: collapse;
}

.papers-table thead th {
  background-color: #e1e4e8;
  text-align: center;
  padding: 10px;
}

.papers-table tbody td {
  border: 1px solid #e1e4e8;
  padding: 10px;
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

button {
  padding: 5px 15px;
  margin: 0 10px;
  background-color: #3498db;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:disabled {
  background-color: #95a5a6;
  cursor: not-allowed;
}

button:not(:disabled):hover {
  background-color: #2980b9;
}

.center-text {
  text-align: center;
}</style>
